import React from 'react'
import { Tabbar } from 'react-vant';
import {mainRouter} from "../router/RouterConfig"
import {NavLink} from "react-router-dom"
import {set_Icon} from "../global"
import {set_Active} from "../api/index"
import {useDispatch} from "react-redux"

function Footer() {
    const dispatch = useDispatch()
    
    const setActive = (index) =>{
        dispatch(set_Active(index))
    }
    return (
        <Tabbar onChange={setActive}> 
            {
                mainRouter.map((item,index)=>{
                    return  <Tabbar.Item key={index} icon={set_Icon(item.icon)}>
                        <NavLink to={item.path}>{item.title}</NavLink>
                    </Tabbar.Item>
                })
            }
        </Tabbar>
    )
}

export default Footer
